<template>
	<view class="wanl-withdraw">
		<view class="edgeInsetTop"> </view>

		<view class="padding-bj bg-white money">
			<view class="text-lg">
				<text>转入到养老金账户</text>
				<text class="text-sm wanl-gray"></text>
			</view>
			<view class="margin-tb-bj price">
				<view class="symbol">
					<text>￥</text>
				</view>
				<input type="digit" maxlength="5" focus @input="replaceInput" />
				<view class="text-lg wanl-gray-light" @tap="emptyInput" v-if="money">
					<text class="wlIcon-shibai"></text>
				</view>
			</view>
			<view class="solid-top padding-top-bj">
				<!-- <block v-if="servicefee > 0">
					<text class="wanl-gray-light">服务费</text>
					<text class="text-price text-orange margin-left-xs">{{servicemoney}}</text>
					<text class="wanl-gray-light">，</text>
				</block> -->
				<text class="wanl-gray-light">可转入</text>
				<text class="wanl-gray-light margin-lr-xs text-price">{{usermoney}}</text>
				<!-- <text class="wanl-gray-light margin-lr-xs"></text> -->
				<!-- <text class="text-orange" v-if="usermoney > 0" @tap="moneyAll">全部</text> -->
			</view>
		</view>
		<view class="padding-bj margin-top">
			<!-- 1.0.5升级 -->
			<button class="mix-btn wanl-bg-redorange" :loading="loading" :disabled="loading" @tap="withdraw">转入</button>
		</view>
		<view class="postform" v-if="infoshow">
			<view class="postformcontent">
				<view class="postformcontenttitle">
					<text>
						个人信息
					</text>
				</view>
				<view class="postformcontentlevel" v-show="postform">
					<view class="title">姓名：</view>
					<input type="text" placeholder="请输入姓名" maxlength="11" v-model="usermsg.name" class="input" :disabled="usermsg.disabled"></input>
				</view>
				<view class="postformcontentlevel" v-show="postform">
					<view class="title">手机号码：</view>
					<input type="number" placeholder="请输入手机号码" maxlength="11" v-model="usermsg.mobile"
						class="input" :disabled="usermsg.disabled"></input>
				</view>
				<view class="postformcontentlevel" v-show="postform">
					<view class="title">性别：</view>
					<picker @change="change" :value="usermsg.gender" :range="range" style="min-width: 200rpx;">
						<view class="picker">
							{{range[usermsg.gender]}}
						</view>
					</picker>
					<!-- <uni-data-select
						name='gender'
					      v-model="value"
					      :range="range"
					      @change="change"
					    ></uni-data-select> -->
				</view>
				<view class="postformcontentlevel" v-show="postform">
					<view class="title">身份证号码：</view>
					<input type="text" placeholder="请输入身份证号码" maxlength="18" v-model="usermsg.card"
						class="input":disabled="usermsg.disabled"></input>
				</view>
				<view class="postformcontentlevel" v-show="postform">
					<view class="title">地区：</view>

					<view class="addr-input">
						<!-- <view class="addr-input"> -->
						<text type="default" @click="btnClick"
							style="font-size: 30upx;padding:0  30upx;">{{usermsg.area}}</text>
					</view>
				</view>

				<view class="padding-bj margin-top">
					<!-- 1.0.5升级 -->
					<button class="mix-btn wanl-bg-redorange" :loading="loading" :disabled="loading"
						@tap="tijiao">提交</button>
				</view>
			</view>
		</view>
		<view class="fixedView" v-if="infoshow">

		</view>
		<wanl-address ref='wanlAddress' @selectAddressylj="successSelectAddress"></wanl-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankData: null,
				usermoney: 0,
				money: null,
				servicemoney: 0,
				servicefee: 0,
				loading: false,
				btxdj: 0,
				postform: true,
				mobile: '',
				area: '请选择',
				fValue: [0, 0, 0],
				fStyles: {
					canceltext: '取消',
					confirmText: '确定',
					cancelColor: '#584f54',
					confirmColor: '#32f06b',
					lineBgColor: 'rgba(50,240,107,.1)',
					lineBorColor: '#23a249',
					columnFontSize: '28rpx'
				},
				infoshow: false,
				usermsg: {
					name: '',
					mobile: '',
					card: '',
					area: '请选择地区',
					disabled:false,
					gender:0
					

				},
				value: 0,
				range: ['请选择性别','男','女'],
			};
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			Area() {
				return this.$store.state.streoList.area;
			}

		},
		methods: {
			successSelectAddress(address) {
				// this.addressData.country = address.country;
				// this.addressData.province = address.province;
				// this.addressData.city = address.city;
				// this.addressData.citycode = address.citycode;
				// this.addressData.district = address.district;
				// this.addressData.formatted_address = address.formatted_address;
				// this.addressData.location = address.location;
				// this.addressData.adcode = address.adcode;
				// this.addressList.location = address.location;
				// this.addressList.adcode = address.adcode;
				// console.log(address)
				this.usermsg.area=address
				// console.log(this.usermsg.area,'333333')
			},
			btnClick() {
				
				this.$refs.wanlAddress.show()
			},
			change(e) {
				// console.log(e)
			     this.usermsg.gender = e.detail.value
			    },
			upData(e) {
				
				this.usermsg.area = e.region

			},
			chooseAddr() {
				if(!this.usermsg.disabled){
					this.$refs.addr.popUp()
				}
				
			},
			async loadData() {
				this.$api.post({
					url: '/wanlshop/pay/initialkzryljzhuanru',
					success: res => {
						//更新全局金额
						this.setMoney(res.money);
						// this.setBtxdj(res.btxdj);

					}
				});
			},
			tijiao(){
				// 1.0.5升级 修复针对多次点击
				if (this.loading) return;
				this.loading = true;
				// 1.0.6升级
				let money = parseFloat(this.money),
					usermoney = parseFloat(this.usermoney);
				if (money <= 0) {
					this.$wanlshop.msg('请填写正确金额');
					return;
				}
				if (money < 10) {
					this.$wanlshop.msg('最少转入金额为10');
					return;
				}
				if (money > usermoney) {
					this.$wanlshop.msg('转出金额不能超过 ' + usermoney + ' 元');
					return;
				}
				if (this.usermsg.name=='') {
					this.$wanlshop.msg('请填写姓名');
					return;
				}
				if (this.usermsg.mobile=='') {
					this.$wanlshop.msg('请填写手机号');
					return;
				}
				if (this.usermsg.card=='') {
					this.$wanlshop.msg('请填写身份证号');
					return;
				}
				if (this.usermsg.area=='请选择地区') {
					this.$wanlshop.msg('请选择地区');
					return;
				}
				this.$api.post({
					url: '/wanlshop/user/zrylj',
					data: {
						number: money,
						mobile:this.usermsg.mobile,
						name:this.usermsg.name,
						card:this.usermsg.card,
						area:this.usermsg.area,
						gender:this.usermsg.gender
					},
					success: res => {
						this.$wanlshop.msg(res);
						console.log(res)
						this.infoshow = false
						this.loading = false;
						this.loadData()
						// 跳转成功
						// this.$wanlshop.to('/pages/page/success?type=dingjinzhuanyue');
					}
				});
			},
			withdraw() {
				// 1.0.5升级 修复针对多次点击
				if (this.loading) return;
				this.loading = true;
				// 1.0.6升级
				let money = parseFloat(this.money),
					usermoney = parseFloat(this.usermoney);
				if (money <= 0) {
					this.$wanlshop.msg('请填写正确金额');
					return;
				}
				if (money > usermoney) {
					this.$wanlshop.msg('转出金额不能超过 ' + usermoney + ' 元');
					return;
				}
				this.$api.post({
					url: '/wanlshop/user/kzryljcha',
					success: res => {
						if (res != 0) {
							this.usermsg=res
							this.value = res.gender;
						}
						// console.log(res,1111)
						this.infoshow = true
						this.loading = false;
						// 跳转成功
						// this.$wanlshop.to('/pages/page/success?type=dingjinzhuanyue');
					}
				});
			},
			setMoney(money) {
				this.usermoney = money;
				this.$store.commit('user/setUserInfo', {
					dingjin: money
				});
			},
			setBtxdj(btxdj) {
				this.btxdj = btxdj;
				this.$store.commit('user/setUserInfo', {
					btxdj: btxdj
				});
				// console.log(this.btxdj,'000')
			},
			// this.setbtxdj(res.);
			replaceInput(e) {
				this.money = e.target.value;
			},
			emptyInput() {
				this.money = null;
			},
			moneyAll() {
				this.money = this.usermoney;
			},
			getCode(str) {
				str = str.replace(/\s+/g, "");
				return str.substring(str.length - 4);
			},
			getType(key) {
				return ['储蓄卡', '信用卡'][key];
			}
		}
	}
</script>

<style>
	.postform {
		width: 100%;
		position: fixed;
		top: 300rpx;
		left: 0;
		z-index: 2;
	}

	.postformcontent {
		width: 100%;
		background: #ffffff;
		padding: 0 2%;
		padding-bottom: 40rpx;

		.postformcontenttitle {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			text-align: center;

		}

		.postformcontentlevel {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.title {
				width: 22%;
				text-align: center;
			}

			.input {
				width: 78%;
				border: 1px solid #e5e5e5;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 3%;
			}
		}
	}

	.fixedView {
		width: 100%;
		hieght: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: black;
		opacity: 0.5;
		z-index: 1;
	}

	.wanl-withdraw .money .symbol {
		font-size: 60rpx;
		margin-right: 10rpx;
	}

	.wanl-withdraw .money .price {
		display: flex;
		align-items: center;
	}

	.wanl-withdraw .money .price input {
		/* #ifdef MP */
		height: 100rpx;
		min-height: 100rpx;
		/* #endif */
		width: 100%;
		font-size: 100rpx;
	}

	.wanl-withdraw .bank {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 25rpx;
	}

	.wanl-withdraw .bank image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 25rpx;
	}

	.wanl-withdraw .bank .content {
		flex: 1;
	}

	.wanl-withdraw .bank .action {}
</style>